<template>
  <div>
    <classloader-chose v-model="loaderName" class="margin-bottom"/>
    <el-upload
      ref="singleUpload"
      drag
      :auto-upload="false"
      action="#"
      :file-list="fileList"
      accept=".class, .java, .zip, .jar, .xml"
      :multiple="false"
      :on-change="handleChange"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传 class,java,zip,jar,xml 文件,且 xml 必须是 pom.xml </div>
    </el-upload>

    <el-dialog append-to-body :visible.sync="dialog.visible" :title="dialog.title">
      <loaded-info :upload-response="dialog.response"/>
    </el-dialog>
  </div>
</template>

<script>
import ClassloaderChose from '@/views/core/classloader/ClassloaderChose'
import loadedInfo from '@/views/core/classloader/loadedInfo'

import core from '@/api/core'

export default {
  name: 'uploadSingle',
  components: {ClassloaderChose, loadedInfo},
  props: {
    classloaderName: String
  },
  data() {
    return {
      loaderName: null,
      dialog: {
        visible: false,
        title:'上传结果',
        response: {}
      },
      fileList: []
    }
  },
  methods: {
    handleChange(file,fileList){
      // 只取最后一个文件
      if (fileList.length){
        this.fileList = fileList.slice(-1)
      }
    },
    submit(){
      return new Promise((resolve, reject) => {
        if (this.fileList.length <= 0){
          this.$message({type:'error',message:'请先选择一个类文件'})
          reject()
          return
        }

        let formData = new FormData()
        formData.append('file',this.fileList[0].raw,this.fileList[0].name)

        core.uploadSingle(this.loaderName,formData).then(res => {
          this.dialog.response = res.data
          this.dialog.visible = true
          resolve()
        })
      })

    }
  },
  mounted() {
    this.loaderName = this.classloaderName
  },
  watch: {
    classloaderName: {
      handler(value) {
        this.loaderName = value
      }
    }
  }
}
</script>

<style scoped>

</style>
